<template>
	<view class="login">
		<view class="l1">
			<view class="l4" style="text-align: center;">
				<text style="font-size: 25px;color: mediumpurple;">欢迎登录</text>
			</view>
			<view class="l3">
				<view class="l2">
					<text>账号：</text>
					<input  type="text" placeholder="请输入账号" v-model="username"/>
				</view>
				<u-line></u-line>
				<view class="l2">
					<text>密码：</text>
					<input type="password" placeholder="请输入密码" v-model="password"/>
				</view>
			</view>
			<u-line></u-line>
			<u-button type="primary" text="登录" style="width: 100px; margin-top: 30px;" @click="login"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username:'',
				password:'',
				token:''
			}
		},
		methods: {
			login(){
				const data={
					username:this.username,
					password:this.password
				}
				this.api.get('/prod-api/api/login','POST',data).then(res=>{
					if(res.data.code===200){
						this.token=res.data.token
						uni.setStorageSync('token_j',this.token)
						uni.setStorageSync('login',1)
						console.log(uni.getStorageSync('token_j'))
						setTimeout(function(){
							uni.showToast({
								title:'登录成功',
								icon:'success'
							})
						},700)
						uni.reLaunch({
							url:'/pages/me/me'
						})
					}else{
						setTimeout(function(){
							uni.showToast({
								title:'参数错误',
								icon:'error'
							})
						},700)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
.l1{
	
	width: 300px;
	height: 200px;
	// border: 2px solid lightpink;
	margin: 250px auto;
	.l3{
		margin-top: 30px;
		.l2{
			margin-left: -30px;
			display: flex;
			margin-top: 20px;
			margin-bottom: 15px;
		}
	}
}
</style>
